<template>
  <div class="chainStoreSearchStore">
    <c-title :hide="false" :text="`搜索`" id="soso" ref="soso"></c-title>
    <div class="topHead" v-if="keyActive == 1">
      <div class="topHead_l" @click="goLoaction">
        <i class="iconfont icon-a-zu4991"></i>
        <p>{{ city }}</p>
        <i class="iconfont icon-icon_more11"></i>
      </div>
      <div class="topHead_r">
        <van-search v-model="keyword" placeholder="请输入搜索关键词" shape="round" @search="toPostData" />
      </div>
    </div>
    <div class="listNav">
      <div class="lisNav" :class="keyActive == 1 ? 'activeNav' : 'activeNavOne'" @click="tapNav(1)">门店自提</div>
      <div class="lisNav" :class="keyActive == 2 ? 'activeNav' : ''" @click="tapNav(2)">门店配送</div>
      <div class="lisNav" :class="keyActive == 3 ? 'activeNav' : 'activeNavLast'" @click="tapNav(3)">快递</div>
    </div>
    <div class="list">
      <template v-if="keyActive == 1">
        <div class="lis" v-for="item in this.info" :key="item.id" @click="tapSelectStore(item)">
          <div class="top">
            <div class="top_l">{{ item.store_name }}</div>
            <div class="top_r">距离{{ item.distance }}{{ item.unit }}</div>
          </div>
          <div class="bottom">
            <div class="bottom_l">
              <div class="time">
                <i class="iconfont icon-seller-time"></i>
                {{ item.business_hours_start }}-{{ item.business_hours_end }}
              </div>
              <div class="address">
                <i class="iconfont icon-seller-position"></i>
                <span>{{ item.store_address }}</span>
              </div>
            </div>
            <div class="bottom_r">
              <div class="circle" @click="goToAdress(item)">
                <i class="iconfont icon-zx_map_local"></i>
              </div>
              <div class="circle" style="margin-left: 0.5rem" @click="callStore(item)">
                <i class="iconfont icon-zx_map_tel"></i>
              </div>
            </div>
          </div>
        </div>
      </template>
      <template v-else>
        <div class="title">收货地址</div>
        <div class="addressLis" v-for="item in info" :key="item.id" @click="tapSelectStore(item)">
          <div class="addressLis_t">
            <div class="addressLis_t_l">
              <div class="name">{{ item.username }}</div>
              <div class="mobile">{{ item.mobile }}</div>
            </div>
            <div class="addressLis_t_r" @click.stop="editAddress(item)">
              <i class="iconfont icon-fontclass-qianshu"></i>
            </div>
          </div>
          <div class="addressLis_b">
            <div class="addressTxt">{{ item.province }}{{ item.city }}{{ item.district }}{{ item.street }}{{ item.address }}</div>
          </div>
        </div>
      </template>
    </div>
    <div class="btnAddress set-pc-styleLeft" v-if="keyActive != 1">
      <div class="btn" @click.stop="AddshowTap">新增地址</div>
    </div>
    <!-- <van-popup v-model="show" position="bottom" :style="{ height: '30%' }"> -->
    <yz-address-list ref="yz_showAddressShop" @confirm="childConfirm" @close="childClose"></yz-address-list>
    <!-- </van-popup> -->
    <!-- v-on:confirm="code_confirmSelectAddress" :options="yzAddressListOptions" -->
  </div>
</template>
<script>
import yzAddressList from "components/ui_components/yz_addressList/index";
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin], //加载更多
  data() {
    return {
      keyword: "",
      keyActive: 1,
      city: "",
      address: "",
      point: "",
      info: [],
      // show: false,
      myLocation: "",

      isLoadMore: true,
      page: 1,
      total_page: 0
    };
  },
  components: { yzAddressList },
  activated() {
    let myLocation = JSON.parse(localStorage.getItem("myLocation"));
    this.myLocation = myLocation;
    if (myLocation && myLocation.timestamp) {
      //解决定位选择“全国”后返回或者跳转其他页面返回又重新定位当前
      this.city = myLocation.city ? myLocation.city.trim() : myLocation.city;
      this.address = myLocation.title;
      this.point = myLocation.point;
      this.getData();
    } else {
      this.fun
        .getLocation("正在定位")
        .then(res => {
          this.city = res.city.trim();
          this.address = res.title;
          this.point = res.point;
          this.getData();
        })
        .catch(err => {
          // this.getData();
          console.log(err);
        });
    }
  },
  methods: {
    childClose() {
      this.$refs.yz_showAddressShop.chainStore = false;
      this.$refs.yz_showAddressShop.popAddAddress = false;
    },
    tapSelectStore(item) {
      let json = {
        get_type: this.keyActive,
        lng: this.point.lng,
        lat: this.point.lat
      };
      if (this.keyActive != 1) {
        json.address_id = item.id;
      } else {
        json.store_id = item.id;
      }
      this.$router.push(this.fun.getUrl("chainStoreIndex", {}, json));
    },
    toPostData() {
      this.info = [];
      this.getData();
    },
    goLoaction() {
      this.$router.push(this.fun.getUrl("chainStoreLoaction", {}, { tag: "chainStore" }));
    },
    childConfirm() {
      this.getData();
    },
    editAddress(item) {
      console.log(item);
      this.$refs.yz_showAddressShop.chainStore = true;
      this.$refs.yz_showAddressShop.popAddAddress = true;
      this.$refs.yz_showAddressShop.create = false;
      this.$refs.yz_showAddressShop.editAddress(item);
    },
    AddshowTap() {
      this.$refs.yz_showAddressShop.chainStore = true;
      // this.show = true;
      this.$refs.yz_showAddressShop.create = true;
      this.$refs.yz_showAddressShop.popAddAddress = true;
    },
    tapNav(key) {
      this.keyActive = key;
      this.info = [];
      this.getData();
    },
    callStore(item) {
      window.location.href = "tel://" + item.mobile;
    },
    goToAdress(items) {
      let point = this.fun.bd_decrypt(items.longitude, items.latitude);
      this.fun.goToWXAdress(point, items.store_name, items.store_address); //, items.address.city
    },
    getData() {
      let urlstr = "";
      if (this.keyActive == 1) {
        urlstr = "plugin.chain-store.frontend.controller.index.store-list";
      } else {
        urlstr = "member.member-address.index";
      }
      $http
        .post(
          urlstr,
          {
            keyword: this.keyword,
            lng: this.point.lng,
            lat: this.point.lat,
            city_name: this.city,
            page: this.page
          },
          " "
        )
        .then(
          response => {
            if (response.result === 1) {
              console.log(response);
              if (this.keyActive == 1) {
                this.info = response.data.list.data;
                this.isLoadMore = true;
                this.total_page = response.data.list.last_page;
              } else {
                this.info = response.data;
              }
            } else {
              // this.$toast(response.msg);
            }
            this.fun.setWXTitle(this.$store.state.temp.item.janst);
          },
          response => {
            //alert('网络错误，请稍后再试！')
          }
        )
        .catch(err => {
          console.log(err);
        });
    },
    getMoreData() {
      if (this.keyActive != 1) return;
      this.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page = this.page + 1;
        let json = {
          keyword: this.keyword,
          lng: this.point.lng,
          lat: this.point.lat,
          city_name: this.city,
          page: this.page
        };
        $http.get("plugin.chain-store.frontend.controller.index.store-list", json, " ").then(
          response => {
            if (response.result === 1) {
              let myData = response.data.list.data;
              this.info = this.info.concat(myData);
              this.isLoadMore = true;
              this.total_page = response.data.list.last_page;
            } else {
              this.$toast(response.msg);
            }
          },
          function(response) {
            console.log(response);
          }
        );
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.chainStoreSearchStore {
  // background: #fff;
  .btnAddress {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4.56rem;
    background: #ffffff;
    .btn {
      background: var(--themeBaseColor);
      border-radius: 1.56rem;
      margin: 0.75rem 0.75rem 1.31rem 0.75rem;
      font-size: 0.94rem;
      font-weight: 500;
      color: #ffffff;
      padding: 0.78rem 0;
    }
  }
}
.list {
  padding: 0.63rem 0.75rem;
  .title {
    font-weight: bold;
    font-size: 0.94rem;
    text-align: left;
    margin-bottom: 0.63rem;
  }
  .addressLis {
    background: #ffffff;
    padding: 0.94rem 0.75rem;
    display: flex;
    flex-direction: column;
    border-radius: 0.5rem;
    margin-bottom: 0.63rem;
    .addressLis_b {
      text-align: left;
      font-size: 0.81rem;
      font-weight: 400;
      color: #6e6e79;
    }
    .addressLis_t {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .addressLis_t_l {
        display: flex;
        align-items: center;
      }
      .addressLis_t_r {
        margin-top: 0.5rem;
        .iconfont {
          color: #aaaab3;
        }
      }
      .name {
        font-size: 0.94rem;
        font-weight: bold;
        color: #3b3b4a;
        margin-right: 0.87rem;
      }
      .mobile {
        font-size: 0.94rem;
        font-weight: 400;
        color: #3b3b4a;
      }
    }
  }
  .lis {
    padding: 0.94rem 0.75rem;
    background: #ffffff;
    border-radius: 0.5rem;
    margin-bottom: 0.63rem;
    .top {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 0.8rem;
      .top_l {
        font-size: 0.94rem;
        font-weight: bold;
        color: #3b3b4a;
      }
      .top_r {
        flex-shrink: 0;
        font-size: 0.81rem;
        font-weight: 400;
        color: #6e6e79;
      }
    }
    .bottom {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      .bottom_l {
        .time {
          display: flex;
          align-items: center;
          font-weight: 400;
          color: #6e6e79;
          font-size: 0.81rem;
          .icon-seller-time {
            font-size: 1.3rem;
            color: #6e6e79;
            margin-left: -2px;
          }
        }
        .address {
          font-weight: 400;
          color: #6e6e79;
          font-size: 0.81rem;
          display: flex;
          align-items: flex-start;
          margin-top: 0.5rem;
          span {
            text-align: left;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
        }
      }
      .bottom_r {
        display: flex;
        .circle {
          width: 1.75rem;
          height: 1.75rem;
          opacity: 1;
          border: 0.03rem solid #d6d6dc;
          border-radius: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .iconfont {
          font-size: 0.8rem;
        }
      }
    }
  }
}
.listNav {
  margin: 0.63rem 0.75rem;
  box-sizing: border-box;
  display: flex;
  background: #f0f0f1;
  border-radius: 0.5rem;
  .lisNav {
    width: 7.31rem;
    height: 2.25rem;
    background: #f0f0f1;
    line-height: 2.25rem;
    font-size: 0.88rem;
    color: #6e6e79;
    font-weight: 400;
    cursor: pointer;
  }
  .activeNav {
    box-shadow: 0.09rem 0.09rem 0.19rem 0.03rem rgba(214, 214, 220, 0.53);
    border-radius: 0.5rem;
    background: #ffffff;
    font-weight: 500;
    color: #00001c;
    font-size: 1rem;
  }
  .activeNavOne {
    border-radius: 0.5rem 0 0 0.5rem;
  }
  .activeNavLast {
    border-radius: 0 0.5rem 0.5rem 0;
  }
}
.topHead {
  display: flex;
  background: #ffffff;
  justify-content: space-between;
  .topHead_l {
    display: flex;
    align-items: center;
    padding: 0.91rem 0.63rem;
    .iconfont {
      color: #333333;
    }
    p {
      margin: 0 0.31rem;
    }
  }
  .topHead_r {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    width: 13.77rem;
    .van-search {
      padding: 0;
    }
  }
}
</style>
